<template>
  <div class="work-container">

    <!-- 弹出层  切换联赛 -->
    <van-popup v-model="show" position="right" :overlay="true" closeable close-icon-position="top-left">
      <!-- 切换联赛组件 -->
      <SwitchLeague></SwitchLeague>
    </van-popup>

    <!-- 导航栏 -->
    <van-nav-bar title="比赛"  class="TopNav">
      <template #left>
        <van-icon name="exchange" size="18" color="white" @click="showPopup"/>
      </template>
    </van-nav-bar>

    <!-- 联赛组件展示区 -->
    <div class="Detailed-competition">
        <div class="Team-details">
          <van-row>

            <!-- 队伍头像介绍 -->
            <van-col span="8" class="Team-details-avatar">
              <!-- <img src="" alt=""> -->
              <van-icon

                :name="this.Leaguecheck[0].logoflag?this.Leaguecheck[0].logo[0].url:this.Leaguecheck[0].logo[0].content"
                color="blue" size="20vw"
                />
            </van-col>
            <!-- 队伍文字介绍 -->
            <van-col span="16" class="Team-details-introduce">
              <p id="teamname">{{ this.Leaguecheck[0].id}}</p>
              <p>{{ this.Leaguecheck[0].startTime}}—{{ this.Leaguecheck[0].endTime}}</p>
            </van-col>
          </van-row>
        </div>
        <div class="Team-matches">
          <van-row class="Team-matches-row">
            <van-col span="8">比赛 13</van-col>
            <van-col span="8">球队 9</van-col>
            <van-col span="8">粉丝 41</van-col>
          </van-row>
        </div>
    </div>

    <!-- 待处理事项 -->
    <!-- 待处理事项内容右侧弹出框 -->
    <van-popup v-model="PendingMattersShow" position="right" :overlay="false" closeable close-icon-position="top-left">
        <!-- 待处理事项的内容区域 -->
        <h1 style="margin: 20vw auto">这是后面将要进行数据请求的 待处理事项</h1>

    </van-popup>
    <div class="Pending-matters" @click="PMshowPopup">

      <!-- 图标 -->
      <div class="Pending-matters-box">
        <van-icon  slot="right" name="edit" color="black" size="7vw" class="Pending-matters-icon"/>
      </div>

      <!-- 文字 -->
      <span>待处理事项</span>

    </div>

    <!-- 技术统计练习 -->
    <!-- 技术统计工作区域右侧弹出框 -->
    <van-popup v-model="StatisticsShow" position="right" :overlay="false" closeable close-icon-position="top-left">
        <!-- 计算统计的工作区域 -->
        <!-- <h1 style="margin: 20vw auto">这是计算统计的工作区域</h1> -->
        <settings></settings>
    </van-popup>

    <!-- 增值服务区域右侧弹出框 -->
    <van-popup v-model="ValueAddedServicesShow" position="right" :overlay="false" closeable close-icon-position="top-left">
    <!-- 增值服务的工作区域 -->
        <h1 style="margin: 20vw auto">这是增值服务的内容区域</h1>
    </van-popup>

    <!-- 技术统计组件栏 -->
    <div class="Tabs">
      <van-row type="flex" class="Tabs-row">
        <van-col span="6" class="Tabs-row-col" @click="StsShow">
          <!-- 图标 -->
          <div class="Tabs-row-col-icon">
            <van-icon  slot="right" name="edit" color="black" size="7vw"/>
          </div>
          <!-- 文字 -->
          <p class="Tabs-row-col-text">技统练习</p>
        </van-col>

        <!-- 增值服务 -->
        <van-col span="6" class="Tabs-row-col" @click="AddedShow">
          <!-- 图标 -->
          <div class="Tabs-row-col-icon">
            <van-icon  slot="right" name="upgrade" color="black" size="7vw"/>
          </div>
          <!-- 文字 -->
          <p class="Tabs-row-col-text">增值服务</p>
        </van-col>
      </van-row>
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import SwitchLeague from '@/components/Switch_League/Switch_League.vue'
import { mapState } from 'vuex'
import settings from '@/views/settings/settings.vue'
export default {
  name: 'view_work',
  data () {
    return {
      show: false,
      PendingMattersShow: false,
      StatisticsShow: false,
      ValueAddedServicesShow: false,
      active: 0
    }
  },
  computed: {
    ...mapState(['CreateLeague', 'Leaguecheck'])
  },
  components: {
    settings,
    SwitchLeague
  },
  methods: {
    showPopup () {
      this.show = true
    },

    PMshowPopup () {
      this.PendingMattersShow = true
    },
    StsShow () {
      this.StatisticsShow = true
    },
    AddedShow () {
      this.ValueAddedServicesShow = true
    }
  }

}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .TopNav {
  background-color: black;
}

::v-deep .van-nav-bar__title{
  color: rgb(255, 255, 255);
}
  .work-container{
    /* position: relative; */
    width: 100%;
    height: 100%;
    /* background-color: rgb(190, 190, 190); */
    overflow: scroll;
  }

  .Nav-bar{
    background-color: black;
  }
  ::v-deep .van-nav-bar__title{
    color: aliceblue;
  }
  .van-popup {
  display: inline-block;
  width: 100%;
  height: 100%;
  }
 ::v-deep .van-icon__image{
   margin-left: -4vw;
   /* height: 16vw; */
   width: 1.5em;
   margin-left: -0.3em;
  }
  #teamname{
    line-height: 23vw;
  }
  .Team-details{
    position: relative;
    height: 30vw;
    background-color: rgb(255, 255, 255);
    border-radius:2vw 2vw 0  0 ;
    border-bottom: 0.5vw solid whitesmoke ;
  }
  .Team-details-avatar{
    position: absolute;
    width: 16vw;
    height: 16vw;
    top :50%;
    left: 5%;
    transform: translateY(-50%);
    background-color: rgb(167, 167, 167);
    border-radius: 8vw;
    overflow: hidden;
  }
  .Team-details-introduce{
    position: absolute;
    width: 70%;
    height: 80%;
    top :50%;
    left: 25%;
    transform: translateY(-50%);
    /* background-color: antiquewhite;00000000 */
  }
  .Team-details-introduce p{
    /* border:  1vw solid rebeccapurple; */
    width: 100%;
    height: 90%;
    display: box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    letter-spacing: 0.5vw
  }
  .Team-details-introduce p:last-child{
    font-size: 0.2vw;
    color: rgb(143, 141, 141);
  }
  .Team-matches-row{
    line-height: 15vw;
    height: 15vw;
    background-color: rgb(255, 255, 255);
    text-align: center;
    border-radius:  0  0 2vw 2vw;
  }
  .Pending-matters{
    position: relative;
    width: 95%;
    height: 15vw;
    background-color: rgb(255, 255, 255);
    border-radius: 2vw;
    margin: 0vw auto;
  }
  .Pending-matters-box{
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    display: inline-block;
    width:8vw;
    height: 8vw;
    /* background-color: antiquewhite; */
  }
  .Pending-matters span{
    position: absolute;
    top: 50%;
    left: 19%;
    transform: translateY(-50%);

  }
  .Detailed-competition{
    width: 95%;
    height: 45vw;
    background-color: rgb(255, 255, 255);
    border-radius: 2vw;
    margin: 2vw auto;
  }
  .Tabs{
    width: 95%;
    height: 17vw;
    background-color: rgb(255, 255, 255);
    border-radius: 2vw;
    margin: 2vw auto;

  }
  .Tabs-row-col{
    display: inline-block;
    width: 15vw;
    height: 15vw;
    /* background-color: bisque; */
    border-radius: 2vw;
  }
  .Tabs-row-col:last-child{
    margin-left: 5vw;
  }
  .Tabs-row-col-icon{
    width: 7vw;
    margin: 2vw auto;
    /* background-color: aquamarine; */
  }
  .Tabs-row-col-text{
    color: black;
    font-size: 2vw;
    bottom: 0.5vw;
    text-align: center;
  }

</style>
